<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-flex>
					<view class="item">子元素</view>
					<view class="item">子元素</view>
					<view class="item">子元素</view>
					<view class="item">子元素</view>
					<view class="item">子元素</view>
					<view class="item">子元素</view>
					<view class="item">子元素</view>
					<view class="item">子元素</view>
					<view class="item">子元素</view>
					<view class="item">子元素</view>
				</pure-flex>
			</pj-demo>

			<!-- 换行 -->
			<pj-demo title="换行">
				<pure-flex wrap>
					<view class="item">子元素</view>
					<view class="item">子元素</view>
					<view class="item">子元素</view>
					<view class="item">子元素</view>
					<view class="item">子元素</view>
					<view class="item">子元素</view>
					<view class="item">子元素</view>
					<view class="item">子元素</view>
					<view class="item">子元素</view>
					<view class="item">子元素</view>
				</pure-flex>
			</pj-demo>

			<!-- 设置间距 -->
			<pj-demo title="设置间距">
				<pure-flex
					wrap
					gap="16px"
				>
					<view class="item">子元素</view>
					<view class="item">子元素</view>
					<view class="item">子元素</view>
					<view class="item">子元素</view>
					<view class="item">子元素</view>
					<view class="item">子元素</view>
					<view class="item">子元素</view>
					<view class="item">子元素</view>
					<view class="item">子元素</view>
					<view class="item">子元素</view>
				</pure-flex>
			</pj-demo>

			<!-- 纵向布局 -->
			<pj-demo title="纵向布局">
				<pure-flex direction="column">
					<view class="item">子元素</view>
					<view class="item">子元素</view>
					<view class="item">子元素</view>
					<view class="item">子元素</view>
					<view class="item">子元素</view>
				</pure-flex>
			</pj-demo>

			<!-- 主轴居中 -->
			<pj-demo
				title="主轴居中"
				desc="横向"
			>
				<pure-flex
					wrap
					align="center"
				>
					<view
						class="item"
						style="height: 30px"
						>子元素</view
					>
					<view
						class="item"
						style="height: 40px"
						>子元素</view
					>
					<view
						class="item"
						style="height: 50px"
						>子元素</view
					>
					<view
						class="item"
						style="height: 40px"
						>子元素</view
					>
					<view
						class="item"
						style="height: 30px"
						>子元素</view
					>
				</pure-flex>
			</pj-demo>

			<!-- 主轴居中 -->
			<pj-demo
				title="主轴居中"
				desc="纵向"
			>
				<pure-flex
					wrap
					direction="column"
					align="center"
				>
					<view
						class="item"
						style="width: 70px"
						>子元素</view
					>
					<view
						class="item"
						style="width: 90px"
						>子元素</view
					>
					<view
						class="item"
						style="width: 110px"
						>子元素</view
					>
					<view
						class="item"
						style="width: 90px"
						>子元素</view
					>
					<view
						class="item"
						style="width: 70px"
						>子元素</view
					>
				</pure-flex>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref, computed } from "vue";
	import { onLoad, onReady, onShow } from "@dcloudio/uni-app";

	// **************************************************************************************************************
	// * Refs
	// **************************************************************************************************************

	// **************************************************************************************************************
	// * Computeds
	// **************************************************************************************************************

	// **************************************************************************************************************
	// * Watches
	// **************************************************************************************************************

	// **************************************************************************************************************
	// * 生命周期
	// **************************************************************************************************************

	// **************************************************************************************************************
	// * Functions
	// **************************************************************************************************************
</script>

<style lang="scss" scoped>
	.page {
		.item {
			background: var(--pure-theme-primary);
			padding: 12px 16px;
			border-radius: var(--pure-radius-default);
			font-size: var(--pure-font-size-small);
			color: var(--pure-text-color-invert);
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
